<template>
	<view>
		<u-popup 
			:show="show" 
			mode="bottom"  
			round="10"
			@close="close" 
			@open="open"
			closeable>
			<view>
				<view class="padding text-center text-lg solid-bottom">选择优惠券</view>
				<view class="padding-xs list padding-top">
					<view class="item padding bg-gray radius-xl margin-bottom coupon" 
						v-for="(item,index) in list" :key="index"
						:class="item.is_usable==20?'view-gray':''">
						<view class="money-text text-center solid-right padding-right">
							<view class="money text-red">
								<text class="text-sm">￥</text>
								<text class="number text-bold">{{item.reduce_price}}</text>
							</view>
							<view class="text-red text-sm">
								最高可减
							</view>
						</view>
						<view class="right crow">
							<view class="nameBox margin-left">
								<view class="name text-black text-bold padding-bottom-xs">
									{{item.name}} <!--  -->
								</view>
								<view class="min text-gray padding-bottom-xs">
									<text class="text-sm text-gray">满{{item.min_price}}可用</text>
								</view>
								<view class="min text-gray">
									有效期至 {{item.end_time}}
								</view>
							</view>
							<!-- <view class="right-border solid-left"></view> -->
							<view class="linqu">
								<button class="cu-btn bg-green sm round shadow" v-if="item.is_usable==20">暂不可用</button>
								<button class="cu-btn bg-green sm round shadow" v-else @click="use(item.user_coupon_id)">
									<text class="padding-sm">使用</text>
								</button>
								<view class="text-sm text-center text-gray" v-if="item.is_usable==20">
									*限门店使用
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: [Object,Array],
				default: ()=>[],
			},
			show: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
			};
		},
		methods:{
			use(user_coupon_id){
				this.$emit('couponPopup',{type:'colse',data:user_coupon_id})
			},
			close(){
				this.$emit('couponPopup',{type:'colse',data:0})
			},
			open(){
				
			}
		}
	}
</script>

<style lang="less" scoped>
.list{
	.item{
		position: relative;
		display: flex;
		align-items: center;
		.money-text{
			width: 170upx;
			.money{
				.number{
					font-size: 40upx;
				}
			}
		}
		.right{
			flex: 1;
			justify-content: space-between;						
			.nameBox{
				.name{
					font-size: 30upx;
				}
				.min{
					font-size: 24upx;
				}
			}
			// .right-border{
			// 	width: 5upx;
			// 	height: 100%;
			// }
		}
	}
}
.coupon::before,.coupon::after{
	content: "";
	position: absolute;
	background-color: white;	
	width: 20upx;
	height: 20upx;
}
.coupon::before {
	top: 0;
	right: 25%;
	border-radius: 0 0 50% 50%;
}

.coupon::after {
	bottom: 0;
	right: 25%;
    border-radius: 50% 50% 0 0; /* 底部两个半圆 */
}
</style>
